<template>
    <div>
        <div>
            <h2 class="h">商品基本信息</h2>
            <div class="line"></div>
            <div class="div_input">
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple "><span class="span1">商品id：</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    placeholder="请输入商品id，不可重复"
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple" style="width: 100%"></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple"><span class="span1">商品名称：</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    placeholder="请输入商品名称"
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="div_input">
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple "><span class="span1">上架状态：</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    placeholder="请输入商品状态"
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple" style="width: 100%"></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple"><span class="span1">商品库存：</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    placeholder="请输入商品库存"
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="div_input">
                <el-row>
                    <el-col :span="4">
                        <div class="grid-content bg-purple "><span class="span1">购买限制：</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    placeholder="单人单次最多购买数量"
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple" style="width: 100%"></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple"><span class="span1">商品描述：</span></div>
                    </el-col>
                    <el-col :span="4">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    type="textarea"
                                    :rows="2"
                                    placeholder="请输入商品描述，最多50字"
                                    v-model="textarea">
                            </el-input>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div style="margin-top: 20px">
            <h2 class="h">商品图片</h2>
            <div class="line"></div>
            <div class="div_input">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <span>首页大图</span>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple">
                            <span>详情页大图</span>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div class="div_input">
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content bg-purples">
                            <el-upload
                                    class="avatar-uploader we"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purple-light"></div>
                    </el-col>
                    <el-col :span="8">
                        <div class="grid-content bg-purples">
                            <el-upload
                                    class="avatar-uploader"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div style="margin-top: 20px">
            <h2 class="h">商品规格</h2>
            <div class="line"></div>
            <div class="div_input">
                <el-row>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <span>商品原价(元)</span></div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <span>促销价(元)</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <span>商品成本价(元)</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <span>快递价格(元)</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <span>购买限制(个/单)</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <span>商品库存(个)</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <span>供货商联系方式</span>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <span>进货时间</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <el-input
                                    v-model="input"
                                    clearable>
                            </el-input>
                        </div>
                    </el-col>
                    <el-col :span="3">
                        <div class="grid-content bg-purple-light">
                            <el-date-picker
                                    v-model="value1"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
        <div id="btn">
            <el-row>
                <el-button type="primary" plain>确定添加</el-button>
            </el-row>
        </div>
    </div>
</template>

<script>
    export default {
        name: "CjAddGoods",
        data() {
            return {
                imageUrl: '',
                input: '',
                textarea: '',
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                    shortcuts: [{
                        text: '今天',
                        onClick(picker) {
                            picker.$emit('pick', new Date());
                        }
                    }, {
                        text: '昨天',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', date);
                        }
                    }, {
                        text: '一周前',
                        onClick(picker) {
                            const date = new Date();
                            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', date);
                        }
                    }]
                },
                value1: '',
            };
        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
        }
    }

</script>

<style scoped>
    .h {
        color: #3399ff;
    }

    .line {
        border: 1px solid #e4e4e4;
        width: 100%;
        margin: 5px;
    }

    #btn{
        margin-top: 20px;
    }
    .span1 {
        height: 40px;
        line-height: 40px;
    }

    .div_input {
        margin-top: 10px;
    }

    .we {

    }

    :last-child {
        margin-bottom: 0;
    }

    .bg-purples {
        background: #cccccc;
    }

    .bg-purple-light {
        background: #e9eef3;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

</style>